<template>
    <div class="wechat">
        <iframe ref="login" width="300px" height="400px" frameborder="0"></iframe>

        <i class="wechat-logo">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#iconwechat"></use>
            </svg>
        </i>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import '@/assets/iconfont/iconfont';

@Component({
    name: 'WechatLogin',
})
export default class WechatLogin extends Vue {
    @Prop({
        type: String,
        default: '',
    })
    private appId!: string;

    @Prop({
        type: String,
        default: '',
    })
    private redirectUri!: string;

    public mounted() {
        const loginIf = this.$refs.login as HTMLIFrameElement;
        loginIf.src =
            'https://open.weixin.qq.com/connect/qrconnect?appid=' +
            this.appId +
            '&scope=' +
            'snsapi_login' +
            '&redirect_uri=' +
            this.redirectUri +
            '&login_type=jssdk&self_redirect=' +
            false;
    }
}
</script>
<style  >
.wechat {
    width: 300px;
    height: 450px;
}
.wechat-logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-style: normal;
    text-align: center;
    text-transform: none;
}
.icon {
    width: 3em;
    height: 3em;
    fill: currentColor;
    overflow: hidden;
}
</style>

